<template>
  <ckeditor :editor="editor" v-model="state" :config="editorConfig" style="width:300px"></ckeditor>
</template>

<script lang="ts">
import { computed, defineComponent, unref, watch } from 'vue';
import { useRuleFormItem } from '@/hooks/component/use-form-item';
import { ref, shallowRef, onMounted } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default defineComponent({
  name: 'CkEditor',
  //不将 attrs 的属性绑定到 html 标签上
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Array, Object] as any,
    },
    valueType: {
      type: String,
      default: 'html',
    },
    height: {
      type: Number,
      default: 300,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['change', 'update:value'],
  setup(props, { emit, attrs }) {
    ClassicEditor.defaultConfig = {
      toolbar: {
        items: ['heading', '|', 'fontFamily','fontSize','bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'blockQuote', 'mediaEmbed', 'undo', 'redo', 'exportPdf', 'exportWord', 'imageUpload', 'fontColor', 'fontFamily', 'fontSize', 'fontBackgroundColor', 'findAndReplace', 'htmlEmbed', 'imageInsert', 'pageBreak', 'removeFormat', 'sourceEditing', 'specialCharacters', 'strikethrough', 'restrictedEditingException', 'subscript', 'insertTable', 'superscript', 'underline', 'todoList', 'wproofreader', 'code', 'codeBlock', 'highlight', 'MathType', 'ChemType', 'previousPage', 'nextPage', 'pageNavigation'],
      },
      fontSize: {
        options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72],
      },
      fontFamily: {
        options: [
          '宋体',
          '黑体',
          '楷体',
          '微软雅黑',
        ]
      },
      language: 'zh-cn',
      image: {
        toolbar: ['imageTextAlternative', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', 'linkImage'],
      },
      table: {
        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties'],
      }
    };
    const editor = ClassicEditor;
    const emitData = ref<any>();
    const editorConfig = ref({});
    //表单值
    const [state] = useRuleFormItem(props, 'value', 'change', emitData);
    //是否是初始加载
    const isInitFirst = ref(true);
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 合并 props 和 attrs
    const bindProps: any = computed(() => Object.assign({}, props, attrs));

    onMounted(() => {});

    return {
      editor,
      emitData,
      state,
      editorConfig,
    };
  },
});
</script>

<style scoped></style>
